<script setup>
import { ref, reactive } from 'vue'

// 定义 props
const props = defineProps({
  item: {
    type: Object,
    required: true
  },
})

// 响应式数据
const activeTriangles = reactive({})

// 方法定义
const handleTriangle = (index) => {
  // 切换对应index的显示状态
  activeTriangles[index] = !activeTriangles[index]
}

const handleStatusTitle = (id) => {
  const status = props.item.status
  switch (status) {
    case 0:
      return "去使用"
    case 1:
      return "已使用"
    case 2:
      return "已失效"
    default:
      return ""
  }
}
</script>
<template>
  <div class="coupon-container">
    <div class="coupon-content">
      <div class="left">
        <div class="noblank-box">
          <div class="tag" :class="{ 'no-tag': item.status !== 0 }">
            <p>{{ item.type }}</p>
          </div>

          <div class="font-content">
            <div class="top-part">
              <div class="price" :class="{ 'no-price': item.status !== 0 }">
                <p>{{ item.price }}</p>
                <div class="yuan">元</div>
              </div>
              <div class="title" :class="{ 'no-title': item.status !== 0 }">{{ item.title }}</div>
            </div>
            <div class="bottom-part">
              <div class="fit" :class="{ 'no-fit': item.status !== 0 }">{{ item.content }}</div>
              <div class="rules-box" @click="handleTriangle(item.id)">
                <div class="rule" :class="{ 'no-rule': item.status !== 0 }">规则</div>
                <div class="triangle" :class="{
                  'no-triangle': item.status !== 0,
                  'rotated': activeTriangles[item.id]
                }"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="blank-box1"></div>
        <div class="blank-box2"></div>
      </div>
      <div class="right" :class="{ 'no-right': item.status !== 0 }"
        :style="{ cursor: item.status === 0 ? 'pointer' : 'not-allowed' }">
        {{ handleStatusTitle(item.id) }}
      </div>
      <div class="tips" v-show="activeTriangles[item.id]">
        <ul v-html="item.rules"></ul>
      </div>
    </div>
  </div>
</template>


<style lang="less" scoped>
.coupon-content {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 50px 0;

  .left {
    position: relative;
    width: calc(100% - 350px);
    border-radius: 32px 0 0 32px;
    background: linear-gradient(to top, #b6d0fa, #fefeff);

    .noblank-box {
      position: relative;
      overflow: hidden;

      .tag {
        position: absolute;
        top: 20px;
        left: -200px;
        width: 500px;
        height: 70px;
        background-color: #2b5ac3;
        rotate: -45deg;
        transform-origin: center center;

        p {
          font-size: 30px;
          color: white;
          text-align: center;
          line-height: 70px;
          margin: 0;
        }
      }

      .no-tag {
        background-color: #4e5159;
      }

      .font-content {
        display: flex;
        flex-direction: column;
        align-items: center;

        .top-part {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 50px 0 0 50px;

          .price {
            display: flex;
            align-items: baseline;
            box-sizing: border-box;

            p {
              color: #214186;
              font-weight: 600;
              font-size: 120px;
              margin: 0;
            }

            .yuan {
              width: 60px;
              height: 60px;
              text-align: center;
              line-height: 60px;
              font-size: 30px;
              color: white;
              border-radius: 50%;
              border: 3px solid white;
              background: linear-gradient(to top, #204086, #4c7bcb);
              transform: translateX(-20px);
            }
          }

          .no-price {
            p {
              color: #4f5159;
            }

            .yuan {
              background: #4f5159;
            }
          }

          .title {
            font-size: 65px;
            color: #224388;
            font-weight: 600;
            padding: 0 20px;
          }

          .no-title {
            color: #52545b;
          }
        }

        .bottom-part {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          padding: 0 20px 20px 50px;

          .fit {
            color: #3364c8;
            font-size: 38px;
          }

          .no-fit {
            color: #4f5159;
          }

          .rules-box {
            display: flex;
            align-items: center;
            cursor: pointer;

            .rule {
              color: #3364c8;
              font-size: 38px;
              font-weight: 600;
            }

            .no-rule {
              color: #4f5159;
            }

            .triangle {
              width: 0;
              height: 0;
              border-top: 30px solid #3364c8;
              border-right: 15px solid transparent;
              border-left: 15px solid transparent;
              margin: 0 20px;
              transition: transform 0.3s ease-in-out;
            }

            .no-triangle {
              border-top: 30px solid #52545b;
            }

            .rotated {
              transform: rotate(-180deg);
            }
          }
        }
      }
    }

    .blank-box1 {
      position: absolute;
      top: 0;
      right: 0;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      transform: translate(50%, -50%);
      background-color: #f6f8f8;
    }

    .blank-box2 {
      position: absolute;
      right: 0;
      bottom: 0 !important;
      width: 50px;
      height: 50px;
      transform: translate(50%, 50%);
      border-radius: 50%;
      background-color: #f6f8f8;
    }
  }

  .no-left {
    background: linear-gradient(to top, #caccd3, #fefeff);
  }

  .right {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 60px;
    color: white;
    width: 350px;
    background: linear-gradient(to top, #6797ea, #3472c4);
    border-radius: 0 32px 32px 0;
  }

  .no-right {
    background: linear-gradient(to top, #8f9095, #616569);
  }

  .tips {
    width: 92%;
    background-color: white;
    margin: 0 auto;

    ul {
      font-size: 44px !important;
      padding: 20px;
      margin: 0;

      //li {
      //  color: #63676b;
      //  font-size: 38px;
      //  list-style: none;
      //
      //}
    }
  }
}
</style>
